<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>石猴红木_产品${one.id?default('')}详情</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/formSelects-v4.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <style>
    	.layui-bg-black{width: 200px;height: 136px;margin-right: 30px;float: left;text-align: center;font-size: 33px;color: #000000!important;padding-top: 30px;}
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.width100 {width: 100px;}
    	.discuss{ float: left;margin-left: 30px;padding-top: 6px;}
    	.discuss p{text-align: left; font-size: 13px;margin-top: 5px;padding-top: 2px;}
    	.discuss_img{ float: left;margin-left: 10px;margin-top: 5px;}
     	.img {vertical-align: top;} 
    </style>
</head>
<body  class="layui-layout-body" style="overflow:scroll;">
<div class="layui-main" style="position: absolute;left: 5px;top: 20px; width: calc(100% - 210px);" >
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
  <legend>产品${one.id?default('')}详情</legend>
</fieldset>
<div class="layui-form"  style="padding-top:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">产品新分类-类型</label>
    <div class="layui-input-block">
    	<input  name="type" id="type" value="${one.type?default('')}" type="hidden"/>
      	<select xm-select="search-local" xm-select-search>
      	<#list typeList as one>
        <option value="${one}">${one}</option>
        </#list>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">产品新分类-风格</label>
    <div class="layui-input-block">
    	<input  name="style" id="style" value="${one.style?default('')}" type="hidden"/>
      	<select xm-select="search-local1" xm-select-search>
      	<#list styleList as one>
        <option value="${one}">${one}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">产品新分类-空间</label>
    <div class="layui-input-block">
    	<input  name="space" id="space" value="${one.space?default('')}" type="hidden"/>
      	<select xm-select="search-local2" xm-select-search>
      	<#list spaceList as one>
        <option value="${one}">${one}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">名称：</label>
    <div class="layui-input-block">
    	<input  name="name" id="name" value="${one.name?default('')}" class="layui-input layui-text"/>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">尺寸：</label>
    <div class="layui-input-block">
    	<input  name="size" id="size" value="${one.size?default('')}" class="layui-input layui-text"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">材质：</label>
    <div class="layui-input-block">
    	<input  name="quality" id="quality" value="${one.quality?default('')}" class="layui-input layui-text"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格：</label>
    <div class="layui-input-block">
    	<input  name="price" id="price" value="${one.price?default('')}" class="layui-input layui-text"/>
    </div>
  </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">头像(点击图片上传)</label>
    <div class="layui-input-block">
     	<input name="pic_url" id="pic_url"  value="${one.pic_url?default('')}" type="hidden" />
      <img src="${one.pic_url?default(base+'/images/upload.png')}" style="max-width: 200px;max-height: 200px;" class="img" /> 
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
	    <button class="layui-btn" id="save"><i class="fa fa-check"></i> 保存</button>	    
	</div>
  </div>	  
</div>

<form action="${base}/util/uploadFile2" method="post" name="uploadForm" enctype="multipart/form-data" id="uploadForm" class="hide" >
    <input name="pic" type="file" id="pic" class="hide"/>
</form>
</body>
<script src="${base}/layui/layui.all.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="${base}/js/formSelects-v4.min.js" type="text/javascript"></script>
<script src="${base}/js/jquery.form.js"></script>
<script type="text/javascript">
var formSelects = layui.formSelects;
formSelects.render('search-local');
formSelects.value('search-local', [${one.type?default('')}], true);

formSelects.render('search-local1');
formSelects.value('search-local1', [${one.style?default('')}], true);

formSelects.render('search-local2');
formSelects.value('search-local2', [${one.space?default('')}], true);

var currentPic = null;
$('body').on('click', '.img', function () {
    currentPic = $(this);
    $("#pic").attr("accept","image/*");
    $("#pic").click();
});
$("#pic").change(function (){
    var fileName = $("#pic").val()

    var options = {
        success:  showResponse,  //处理完成的回调函数
        resetForm: true,
        //dataType:  'json'
    };
    $("#uploadForm").ajaxSubmit(options);
});

$("#save").click(function (){
	$("#type").val(formSelects.value('search-local', 'valStr'));
	var type = $("#type").val();
	$("#style").val(formSelects.value('search-local1', 'valStr'));
	var style = $("#style").val();
	$("#space").val(formSelects.value('search-local2', 'valStr'));
	var space = $("#space").val();
	
	var size = $("#size").val();
	var price = $("#price").val();
	var quality = $("#quality").val();
	var name = $("#name").val();
	var pic_url = $("#pic_url").val();
	$.post("${base}/shihou/save",
	   		{"type":type,"id":"${one.id?default('')}","style":style,"space":space,"size":size
			,"price":price,"quality":quality,"name":name,"pic_url":pic_url
			},function(data){ 
	   			layer.alert(data);
	   		}
	 );	
	
});

function showResponse(data)  {
    console.log(data);
    if(data.error == 0) {
    	 currentPic.attr("src","http://file.changshuclub.com/" + data.url);
    	 $("#pic_url").val("http://file.changshuclub.com/" + data.url);
    } else {
    	layer.alert(data.message);
    }  
}
</script>
</html>